<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>js图片预览功能</title>
  </head>
  <body>
    <!-- 上传图片的input 绑定onchange事件-->
    <input type="file" onchange="previewFile()" /><br />
    <!-- 预览的图片 -->
    <img src="" height="200" width="300" alt="Image preview..." />
    <script language="javascript">
      function previewFile() {
        var preview = document.querySelector('img')
        // 选中file元素，并访问其files属性的第一个值
        var file = document.querySelector('input[type=file]').files[0]
        console.log(document.querySelector('input[type=file]').files)
        console.log(document.querySelector('input[type=file]').files[0])

        var reader = new FileReader()
        reader.onloadend = function () {
          preview.src = reader.result
        }
        if (file) {
          reader.readAsDataURL(file)
        } else {
          preview.src = ''
        }
      }
    </script>
    <script>
      let obj = {
        name: 'sxt',
        age: 19,
        sex: 'male'
      }
      let { name, sex } = obj
    </script>
  </body>
</html>
